<template>
  <div id="refDiv">
    <el-row :gutter="20">
      <!-- <el-col class="refItem" :span="6" :offset="0">
        总金额:
        {{
          allMoney(
            message.payInfo.ticketPrice,
            message.payInfo.totalAmount,
            message.payInfo.serviceFee,
            message.payInfo.insureFee,
            message.payInfo.redPackage
          )
        }}元</el-col
      > -->
      <el-col class="refItem" :span="24" :offset="0">
        实付金额: {{ message.payInfo.totalPay }}元</el-col
      >
      <el-col class="refItem" :span="5" :offset="0">
        票价: {{ message.payInfo.ticketPrice }}元</el-col
      >

      <el-col class="refItem" :span="8" :offset="0">
        服务费: {{ message.payInfo.serviceFee }}元</el-col
      >
      <el-col class="refItem" :span="8" :offset="0">
        保险: {{ message.payInfo.insureFee }}元</el-col
      >
      <el-col class="refItem" :span="6" :offset="0">
        数量: {{ message.payInfo.totalAmount }}张</el-col
      >
      <el-col class="refItem" :span="8" :offset="0">
        红包: {{ message.payInfo.redPackage }}元</el-col
      >
      <el-col class="refItem" :span="24" :offset="0">
        服务费:
        <el-radio
          v-model="refdata.isRefundServiceFee"
          @change="serviceFee"
          :label="true"
          >退服务费</el-radio
        >
        <el-radio
          v-model="refdata.isRefundServiceFee"
          @change="serviceFee"
          :label="false"
          >不退服务费</el-radio
        ></el-col
      >
      <el-col class="refItem" :span="24" :offset="0">
        手续费比例:
        <el-select
          style="margin-right: 20px"
          v-model="refdata.refundFeeRate"
          @change="refFee"
          placeholder="请选择"
        >
          <el-option
            v-for="item in refMsg"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="color: #909399"
          >手续费: {{ shouPay }}元 * {{ message.payInfo.totalAmount }}人</span
        >
      </el-col>
      <el-col class="refItem" :span="24" :offset="0">
        退款金额:
        <span style="color: #ff7b48">{{ refdata.refundMoeny }}元</span></el-col
      >
      <el-col class="refItem" :span="24" :offset="0">
        退款原因:
        <el-select
          v-model="refdata.refundReason"
          placeholder="请选择"
          style="width: 60%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col class="refItem" :span="24" :offset="0">
        补充说明:
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="refdata.des"
        >
        </el-input
      ></el-col>
      <el-col :span="24" :offset="16" style="margin-top: 30px">
        <el-button @click="refSend(1)">取 消</el-button>
        <el-button type="primary" @click="refSend(2)">确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import utils from "../../js/index";
export default {
  watch: {
    parentRefData(n, o) {
      //n为新值,o为旧值;
      this.message = n;
      this.refdata.refundReason = this.getRefMsg(n.refMsg).msg
        ? this.getRefMsg(n.refMsg).msg
        : "";
      this.refdata.des = this.getRefMsg(n.refMsg).des;
      this.refdata.refundFeeRate = undefined;
      this.refdata.refundMoeny = n.payInfo.totalPay;
      this.shouPay = 0;
    },
    immediate: true,
    deep: true,
  },
  props: ["parentRefData"],
  data() {
    return {
      // 退款所需数据  success
      refdata: {
        orderCode: "",
        isRefundServiceFee: undefined,
        refundFeeRate: undefined,
        refundMoeny: "",
        refundReason: "",
        des: "",
      },
      message: {},
      shouPay: "",
      // 退款手续费
      refMsg: [
        {
          value: 0,
          label: "不收取手续费",
        },
        {
          value: 10,
          label: "收取10%手续费",
        },
        {
          value: 20,
          label: "收取20%手续费",
        },
        {
          value: 50,
          label: "收取50%手续费",
        },
      ],
      options: [
        {
          value: "超时",
          label: "超时",
        },
        {
          value: "车站停班",
          label: "车站停班",
        },
        {
          value: "车站下班",
          label: "车站下班",
        },
        {
          value: "车站断网",
          label: "车站断网",
        },
        {
          value: "车站停电",
          label: "车站停电",
        },
        {
          value: "车站班次信息有误（提前发车等）",
          label: "车站班次信息有误（提前发车等）",
        },
        {
          value: "车站同意退款",
          label: "车站同意退款",
        },
        {
          value: "推送信息有误",
          label: "推送信息有误",
        },

        {
          value: "已打印（未出票、车站同意退款）",
          label: "已打印（未出票、车站同意退款）",
        },
        {
          value: "自助机购票失败",
          label: "自助机购票失败",
        },
        {
          value: "自助机故障",
          label: "自助机故障",
        },

        {
          value: "车站支持在线退票（扣除...手续费）",
          label: "车站支持在线退票（扣除...手续费）",
        },
        {
          value: "乘客原因（此项一定要写清楚原因）",
          label: "乘客原因（此项一定要写清楚原因）",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
    };
  },

  created() {
    this.message = this.parentRefData;
    this.refdata.refundFeeRate = 0;
    this.refdata.isRefundServiceFee = this.message.refundInfo.isApply;
    this.refdata.refundReason = this.getRefMsg(this.message.refMsg).msg
      ? this.getRefMsg(this.message.refMsg).msg
      : "";
    this.refdata.des = this.getRefMsg(this.message.refMsg).des;
    this.refdata.refundMoeny = this.message.payInfo.totalPay;
    this.shouPay = 0;
    this.refFee(this.refdata.refundFeeRate);
  },
  methods: {
    // allMoney(piao, ren, fu, bao, hong) {
    //   return piao * ren + fu + bao + hong;
    // },
    serviceFee(val) {
      console.log(this.refdata.refundFeeRate);
      this.refFee(this.refdata.refundFeeRate);
    },
    refFee(val) {
      // 乘客人数
      var totalAmount = this.message.payInfo.totalAmount;
      // 服务费
      var serviceFee = this.message.payInfo.serviceFee;
      // 红包
      var redPackage = this.message.payInfo.redPackage;
      // 保险
      var insureFee = this.message.payInfo.insureFee;
      // 是否退服务费
      var isRefundServiceFee = this.refdata.isRefundServiceFee;

      switch (val) {
        case 0:
          this.refdata.refundMoeny =
            this.message.payInfo.ticketPrice * totalAmount +
            (isRefundServiceFee ? serviceFee : 0);
          this.shouPay = 0;
          break;
        case 10:
          // var money = utils.utils.calcShou(
          //   this.message.payInfo.ticketPrice / totalAmount,
          //   10
          // );
          var money = utils.utils.calcShou(
            this.message.payInfo.ticketPrice,
            10
          );
          this.refdata.refundMoeny =
            money[0] < 0
              ? 0
              : money[0] * totalAmount +
                (isRefundServiceFee ? serviceFee : 0) -
                redPackage +
                insureFee;
          this.shouPay = money[1];
          break;
        case 20:
          var money = utils.utils.calcShou(
            this.message.payInfo.ticketPrice,
            20
          );
          this.refdata.refundMoeny =
            money[0] < 0
              ? 0
              : money[0] * totalAmount +
                (isRefundServiceFee ? serviceFee : 0) -
                redPackage +
                insureFee;
          this.shouPay = money[1];
          break;
        case 50:
          var money = utils.utils.calcShou(
            this.message.payInfo.ticketPrice,
            50
          );
          this.refdata.refundMoeny =
            money[0] < 0
              ? 0
              : money[0] * totalAmount +
                (isRefundServiceFee ? serviceFee : 0) -
                redPackage +
                insureFee;
          this.shouPay = money[1];
          break;
        default:
          break;
      }
    },
    // 退款原因、补充说明截取
    getRefMsg(val) {
      var obj = {};
      if (!val) {
        obj.msg = val;
        obj.des = "";
        return obj;
      }
      if (val.indexOf("。") >= 0) {
        obj.msg = val.substring(0, val.indexOf("。"));
        obj.des = this.message.refMsg.substring(val.indexOf("。") + 1);
      } else {
        obj.msg = val;
        obj.des = "";
      }
      return obj;
    },
    refSend(n) {
      this.refdata.orderCode = this.message.orderInfo.orderCode;
      this.refdata.refundReason =
        this.refdata.refundReason + "。" + this.refdata.des;
      this.$emit("success", n, this.refdata);
    },
  },
};
</script>

<style scoped>
.refItem {
  line-height: 50px;
}
#refDiv {
  font-size: 15px;
}
</style>